<template>
  <el-dialog
    :visible.sync="visible"
    title="选择接收部门"
    width="60%"
    @close="msgItemVisible">
    <div class="dialog-main-tree" v-loading="itemLoading">
      <el-tree ref="menuTree" :data="treeData" :default-checked-keys="checkedKeys" :check-strictly="false" :props="defaultProps"
               :filter-node-method="filterNode" class="filter-tree" node-key="id" highlight-current show-checkbox
               default-expand-all />
    </div>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false" icon="el-icon-circle-close">取 消</el-button>
      <el-button type="primary" icon="el-icon-circle-plus-outline" @click="saveDep">确 定</el-button>
    </div>

  </el-dialog>
</template>
<script>
  import {fetchTree} from '@/api/admin/dept'
  export default {
    data(){
      return{
        visible: this.show,
        itemLoading: false,
        treeData: [],
        checkedKeys: [],
        defaultProps: {
          label: 'name',
          value: 'id'
        },

        resultData: this.checkList,
      }
    },
    props:{
      show:{
        type: Boolean,
        default: false,
      },
      checkList:{
        type: Array,
        default: () => {
          return []
        },
      },
      msgId: {
        default: null,
      }
    },
    watch: {
      show(val){
        this.visible = val
        if (val){
          this.getList()
        }
      },
      visible(val){
        if (!val){
          this.$emit('update:show', val)
        }
      },
      checkList(val){
        this.resultData = val
      },

    },
    methods:{
      //选择发送人弹窗
      getList() {
        this.itemLoading = true
        fetchTree().then(response => {
          this.treeData = response.data.data
          this.checkedKeys = this.resolveAllEunuchNodeId(this.treeData, this.checkedKeys, [])


          console.log('ppppppppppp',this.resultData)
          if (this.resultData.length){
            let list = []
            this.resultData.forEach(item => {
              list.push(item.deptId)
            })
            console.log('ooooooo',list)
            this.checkedKeys = list
          }else{
            this.checkedKeys = []
            // this.$refs.menuTree.setCheckedKeys([])
          }

          this.itemLoading = false
        }).catch(err => {
          this.itemLoading = false
        })
      },
      /**
       * 解析出所有的太监节点id
       * @param json 待解析的json串
       * @param idArr 原始节点数组
       * @param temp 临时存放节点id的数组
       * @return 太监节点id数组
       */
      resolveAllEunuchNodeId(json, idArr, temp) {
        for (let i = 0; i < json.length; i++) {
          const item = json[i]
          // 存在子节点，递归遍历;不存在子节点，将json的id添加到临时数组中
          if (item.children && item.children.length !== 0) {
            this.resolveAllEunuchNodeId(item.children, idArr, temp)
          } else {
            temp.push(idArr.filter(id => id === item.id))
          }
        }
        return temp
      },
      filterNode(value, data) {
        if (!value) return true
        return data.label.indexOf(value) !== -1
      },
      saveDep(){
        // let checkedNodes = this.$refs.menuTree.getCheckedNodes(false,true)
        let checkedNodes = this.$refs.menuTree.getCheckedNodes()
        // if (!checkedNodes.length){
        //   this.$message.error('请选择接收部门')
        //   return false
        // }
        this.resultData = []
        checkedNodes.forEach(item => {
          this.resultData.push({
            deptId: item.id,
            deptName: item.name
          })
        })
        let depStr = this.resultData.map((item => {
          return item.deptName
        })).join('、')
        this.visible = false
        this.$emit('save',this.resultData,depStr )
      },
      msgItemVisible(){
        this.visible = false
      },

    }
  }
</script>
<style lang="scss" scoped>
  .dialog-main-tree {
    max-height: 400px;
    overflow-y: auto;
  }
</style>

